import { Button, Modal, Form,Input,Select } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import {useForm} from 'antd/es/form/Form';
import form from 'antd/lib/form'
import {administratoradd} from '../../apis/administrator'
const Administratoradd = (props: any) => {
  // const [confirmLoading,] = useState(false)
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  // 下拉选择
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  const [form] = Form.useForm();
  // Form表单
  const onFinish = async(values:any) => {
    console.log(values);
    const res:any = await administratoradd({...values}).catch()
    // console.log(res);
    if(res.errCode===10000){
      setIsModalOpen(false);
      props.getUserClose()
    }
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  useEffect(() => {}, []);
  return (
    <div>
      <Button type="primary" onClick={showModal}>
        添加
      </Button>
      <Modal
        title="管理员添加"
        open={isModalOpen}
        onCancel={handleCancel}
        footer={[]}
        // confirmLoading={confirmLoading}
      >
        <Form
          form={form}
          onFinish={onFinish}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 14 }}
        >
          <Form.Item name="username" label="账号" rules={[{ required: true,message:"请输入账号" }]}>
            <Input />
          </Form.Item>
          <Form.Item name="pass" label="密码" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item
            name="notpass"
            label="确认密码"
            rules={[{ required: true }]}
          >
            <Input />
          </Form.Item>
          <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="tel" label="联系方式" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="note" label="角色" rules={[{ required: true }]}>
            <Select
              placeholder="请选择"
              style={{ width: 120 }}
              onChange={handleChange}
              options={[
                {
                  value: 'jack',
                  label: 'Jack',
                },
              ]}
            />
          </Form.Item>
          <Form.Item style={{ marginLeft: '10%' }}>
            <Button type="primary" htmlType="submit">
              确认
            </Button>
            <Button htmlType="button">
              取消
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default Administratoradd;
